<template>
  <div>
    <el-container >
      <el-header class="userheader">

        <h1 class="title">心愿墙</h1>
        <!--  头像下拉菜单-->

        <el-dropdown class="userFace" @command="userHandlerCommond">
  <span class="el-dropdown-link">
  <span>
      <span style="margin-right: 10px">{{ user.username }}</span>
      <i><img :src="getFace" style="height: 42px; width: 36px; border-radius: 45px"></i>
  </span>
  </span>
          <el-dropdown-menu slot="dropdown" v-if="existUser">
            <el-dropdown-item command="updatePassword">修改密码</el-dropdown-item>
            <el-dropdown-item command="outLogin">注销</el-dropdown-item>
          </el-dropdown-menu>
          <el-dropdown-menu slot="dropdown" v-else>
            <el-dropdown-item command="userLogin">用户登录</el-dropdown-item>
            <el-dropdown-item command="adminLogin">管理员登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

      </el-header>
      <el-container>

        <el-aside width="200px">
          <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b"
              router>
            <!--            遍历有二级路由-->
            <el-submenu
                v-for="(router,index) in this.$router.options.routes"
                :index="router.name"
                :key="index+''"
                v-if="!router.isAble">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{ router.name }}</span>
              </template>
              <template v-for="(children,index) in router.children">
                <template v-if="children.hidden!=true">
                  <el-menu-item :index="children.path">{{ children.name }}</el-menu-item>
                </template>

              </template>
              <el-menu-item @click="chatMessage">公共聊天室</el-menu-item>
            </el-submenu>


          </el-menu>
        </el-aside>
        <el-container>

          <el-main>
            <router-view></router-view>
          </el-main>
          <el-footer>
            <div style="width: 100%; margin-top: 20px;text-align: center">
              <span>©2021-2022</span>
            </div>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>


  </div>
</template>

<script>
export default {
  name: "ManagerHome",
  data() {
    return {
      user: {

      }
    }
  },

  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    chatMessage() {
      this.$message("未开放，敬请期待")
    },
    userHandlerCommond(command){
      if(command == "userLogin")
        this.$router.replace("/userLogin");
      if(command == "adminLogin")
        this.$router.replace("/adminLogin");
      if(command == "updatePassword")
        this.$router.push("/AdminUpdatePassword");
      if(command == "outLogin"){
        window.sessionStorage.removeItem("user");
        window.sessionStorage.removeItem("userToken");
        window.sessionStorage.removeItem("adminToken");
        this.$message({type:"success",message:"注销成功"})
        this.$router.replace("/adminLogin");
      }

    },
    getLog(){
      this.$router.push("/log");
    }

  },
  computed: {
    getFace() {
      let user = window.sessionStorage.getItem("user");
      if (user && user.face == "") {
        return user.face;
      }
      console.log("默认头像");
      return require('../assets/default.jpeg');
    },
    existUser() {
      return window.sessionStorage.getItem('adminToken')

    }
  },
  mounted() {
    if (window.sessionStorage.getItem("user")){
      let user = JSON.parse(window.sessionStorage.getItem("user"));
      this.user = user;
      // this.user = user;
    }

  }
}
</script>

<style scoped>
.userheader {
  background-color: #409EFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  box-sizing: border-box;
}

.userheader .title {
  color: white;
  font-family: 小米兰亭;
  font-style: italic;
  font-size: 30px;

}

.el-dropdown-link {
  height: 42px;
  width: 36px;
  cursor: pointer;
}
</style>
